import React, { forwardRef, useEffect, useImperativeHandle, useState } from 'react'
import api from '../../api'
import { Form, Input, message, Modal, Select } from 'antd'

const RecipeActions = (props, ref) => {
    const [open, setopen] = useState(false)
    // 和数据双向绑定
    const [form] = Form.useForm()
    // 确认按钮
    const handleOk = () => {
        updateData()
    }
    // 点击关闭弹窗
    const handleDelete = () => {
        setopen(false)
    }
    // 点击打开弹窗
    const showMod = (record) => {
        form.setFieldsValue(record)
        setopen(true)
    }
    // 修改套餐
    const updateData = async () => {
        const res = await api.searchMenu.update({
            //  getFieldValue 获取当前表单所有的值
            ...form.getFieldValue()
        })
        if (res.meta.status == 200) {
            // 接受父组件的方法更新列表
            props.getSearchMenu()
            setopen(false)
            message.open({
                type: 'success',
                content: '修改成功'
            })
        }

    }
    // 暴露方法给父组件
    useImperativeHandle(ref, () => {
        // 返回值就是暴露给父组件的数据
        return {
            showMod
        }
    })


    const handleChange = (value) => {
        console.log(`selected ${value}`);
    };
    return (
        <>
            <Modal title='修改菜谱' open={open} onOk={handleOk} onCancel={handleDelete}>
                <Form labelCol={{ style: { width: 100 } }} form={form}>
                    <Form.Item label='是否观看视频' name='isFree'>
                        <Select
                            defaultValue="是否观看视频"
                            style={{
                                width: 160,
                            }}
                            onChange={handleChange}
                            options={[
                                {
                                    value: 'Y',
                                    label: '是',
                                },
                                {
                                    value: 'N',
                                    label: '否',
                                },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label='是否热门' name='isFree'>
                        <Select
                            defaultValue="是否为热门菜谱"
                            style={{
                                width: 160,
                            }}
                            onChange={handleChange}
                            options={[
                                {
                                    value: 'Y',
                                    label: '是',
                                },
                                {
                                    value: 'N',
                                    label: '否',
                                },
                            ]}
                        />
                    </Form.Item>
                    <Form.Item label='菜谱名称' name='name'>
                        <Input />
                    </Form.Item>
                    <Form.Item label='菜谱制作时间' name='needtime'>
                        <Input />
                    </Form.Item>
                </Form>
            </Modal>
        </>
    )
}

export default forwardRef(RecipeActions) 